<template>
  <div>
    <div class="header">
      <p></p>
      <a-divider>活动信息</a-divider>
    </div>

    <div class="main">
      <div style="background-color: #fff; padding: 20px" class="main_cards">
        <a-spin
          size="large"
          v-show="loadingVisible"
          style="loading_icon"
          tip="正在加载中"
        ></a-spin>
        <div class="main_card" v-for="item in records" :key="item.id">
          <a-card :bordered="false">
            <div slot="title" style="display: flex; align-items: center">
              <i
                @click="showCode(item.id)"
                class="iconfont icon-ico1"
                style="
                  font-size: 30px;
                  color: #66b1ff;
                  margin-right: 20px;
                  cursor: pointer;
                "
              ></i>
              {{ item.title }}
            </div>

            <a-icon
              type="close"
              class="cross"
              @click="deleteItem(item.id)"
              v-if="isAuth(['ROOT', 'ACTIVITY:DELETE'])"
            />
            <p>活动时间: {{ item.startTime }}</p>
            <p>结束时间: {{ item.endTime }}</p>
            <p>签到时间: {{ item.signTime }}</p>
            <p>学生数: {{ item.students }}</p>
            <span style="margin-right: 20px">状态:</span>
            <a-tag color="blue" class="tag">{{
              getNowTime() > item.startTime
                ? getNowTime() > item.endTime
                  ? "已结束"
                  : "已开始"
                : "未开始"
            }}</a-tag>
            <a-button
              type="primary"
              style="margin-left: 80px"
              @click="modifyItem(item)"
              v-if="isAuth(['ROOT', 'ACTIVITY:UPDATE'])"
            >
              <!-- 当前时间 大于签到时间 查看  允许在开始前 修改 -->
              <!-- TODO: 这里注意分别 当修改的时候的时候 进入的页面和 查看的页面是不一样的 -->
              {{ getNowTime() > item.signTime ? "查看" : "修改" }}
            </a-button>
            <!-- 当前时间小于开始时间 -->
            <a-button
              type="primary"
              @click="AssignStudent(item)"
              style="margin-left: 10px"
              v-if="
                getNowTime() < item.startTime &&
                isAuth(['ROOT', 'ACTIVITY:UPDATE'])
              "
            >
              <!-- 当前时间 大于开始时间 查看  允许在开始前 修改 -->
              分配学生
            </a-button>
          </a-card>
        </div>
        <div
          class="main_card_add_box"
          @click="toAddExams"
          v-if="isAuth(['ROOT', 'ACTIVITY:INSERT'])"
        >
          <a-card :bordered="false">
            <a-icon type="plus-circle" />
          </a-card>
        </div>
      </div>
      <div class="changepaper">
        <a-pagination v-model="current" :total="50" show-less-items />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 1,
      records: {},
      loadingVisible: true,
    };
  },
  created() {
    localStorage.setItem("activeId", "");
    this.getAllActiveDetail();
  },
  methods: {
    // 二维码签到
    showCode(id) {
      localStorage.setItem("activeId", id);
      let routeData = this.$router.resolve({
        name: "showCode",
      });
      window.open(routeData.href, "_blank");
    },

    AssignStudent(record) {
      this.$router.push({
        name: "activeAssignStudent",
        params: { record },
      });
    },
    // 判断现阶段允许修改还是查看

    modifyItem(record) {
      if (this.getNowTime() > record.signTime) {
        // 当前时间 大于签到时间 说明只能查看 不能改了
        this.$router.push({
          name: "activeCheckDetail",
          params: { record },
        });
      } else {
        this.$router.push({
          name: "activeAddOrUpdate",
          params: { record },
        });
      }
    },
    async getAllActiveDetail() {
      const { data: res } = await this.$http.get(
        `/admin/activities?size=5&page=${this.current}`
      );
      this.loadingVisible = false;
      this.records = res.data.records;
      // if (this.getNowTime() < this.records[0].startTime) {
      //   // console.log("未开始");
      // }
    },
    getNowTime() {
      var date = new Date();
      var seperator1 = "-";
      var seperator2 = ":";
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        date.getHours() +
        seperator2 +
        date.getMinutes() +
        seperator2 +
        date.getSeconds();
      return currentdate;
    },
    toAddExams() {
      this.$router.push({
        name: "activeAddOrUpdate",
      });
    },
    async deleteItem(id) {
      const { data: res } = await this.$http.delete(`/admin/activity/${id}`);
      if (res.code == 200) {
        this.common.notify("success", "删除成功");
        this.getAllActiveDetail();
      }
    },
  },
  watch: {
    async current(newVal, oldVal) {
      const { data: res } = await this.$http.get(
        `/admin/activities?size=5&page=${newVal}`
      );
      this.records = res.data.records;
    },
  },
  computed: {},
};
</script>
<style  lang='less' scoped>
.ant-card {
  box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.06);
}
.header {
  width: 100%;
  height: 100px;
  padding-top: 40px;
  padding-left: 40px;
}
.main {
  padding-bottom: 30px;
  .main_card {
    position: relative;
    // margin-bottom: 150px;
    transition: 0.5s;
    .tag {
      position: absolute;
      transform: none;
    }
    .cross {
      position: absolute;
      right: 5px;
      top: 5px;
      transform: none;
      color: rgb(202, 199, 199);
      cursor: pointer;
    }
  }
  .changepaper {
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
    margin-top: -20px;
  }
}
/deep/ .ant-card-head-title {
  padding: 5px 0 !important;
}

.main_card:hover {
  transform: translateY(-20px) scale(1.01);
  box-shadow: 0px 0px 50px rgba(184, 180, 180, 0.1);
}
.main_card_add_box:hover {
  transform: translateY(-20px) scale(1.01);
  box-shadow: 0px 0px 50px rgba(184, 180, 180, 0.1);
}
// 取消card 下 所有的样式浮动
.main_cards {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.main_card {
  width: 350px;
  height: 150px;
  margin: 0 30px 150px 30px;
}
.main_card_add_box {
  width: 350px;
  height: 240px;
  margin-left: 30px;
  margin-right: 30px;
  transition: 0.5s;
  cursor: pointer;
  /deep/ .ant-card {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/ .ant-card-head {
    border-bottom: none;
  }
  /deep/ .anticon svg {
    display: block;
    width: 100px;
    height: 100px;
    color: #eee;
  }
}
.main_card > *:hover {
  transform: none;
}

.main_card_add_box > *:hover {
  transform: none;
}
/deep/ .ant-spin-spinning {
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 55%;
}
</style>